<template>
	<view @tap.stop class="flex flex-center grid-gap-2" :class="[`grid-gap-${props.gap}`]">
		<uni-icons type="minus-filled" color="var(--xl-primary-light-1)" :size="size" v-if="value>props.min||props.show"
			@tap="decServiceNum"></uni-icons>
		<view class="flex flex-y-baseline grid-gap-1" :class="[props.size]" v-if="props.min||value||props.show">
			<text class="font-weight-600 text-grey">{{value}}</text>
			<text class="font-weight-600 text-grey h9" v-if="props.unit">{{props.unit}}</text>
		</view>
		<uni-icons type="plus-filled" color="var(--xl-primary-light-1)" :size="size"
		@tap="incServiceNum"></uni-icons>
	</view>
</template>

<script setup lang="ts">
import { ref, watchEffect, defineProps,computed } from 'vue';
const props = withDefaults(defineProps<{
	modelValue: number
	min?: number
	max?: number
	unit?: string
	show?: boolean
	size?: string
	gap?: number|string
}>(), {
	min: 0,
	max: 999,
	unit: '',
	show:false,
	size: 'h8',
	gap: 2
});
const value = ref(0);
watchEffect(() => {
	value.value = Number(props.modelValue);
});
const size = computed(() => {
	switch(props.size){
		case 'h1':
			return 56;
		case 'h2':
			return 52;
		case 'h3':
			return 48;
		case 'h4':
			return 44;
		case 'h5':
			return 40;
		case 'h6':
			return 36;
		case 'h7':
			return 32;
		case 'h8':
			return 28;
		case 'h9':
			return 24;
		case 'h10':
			return 20;
	}
});
const emit = defineEmits(['update:modelValue','change']);
const decServiceNum=()=>{
	if(value.value<=props.min) return;
	value.value--;
	emit('update:modelValue', value.value);
	emit('change', value.value);
}
const incServiceNum=()=>{
	if(value.value>=props.max) return;
	value.value++;
	emit('update:modelValue', value.value);
	emit('change', value.value);
}
</script>

<style lang="scss">

</style>